<!-- eslint-disable InnerIPLeak -->
<template>
  <a-form-model
    class="detailPaddingPage"
    style="display: flex; flex-direction: column"
    :layout="formLayout"
    :colon="false">
    <!-- 审核操作 -->
    <a-form-model-item :label="$t('reviewComments')" class="customFormModelItem2"> </a-form-model-item>
    <a-form-model-item>
      <a-row >
        <!-- 切换自己输入或者下拉选择 -->
        <a-col :md="2" :sm="2"></a-col>
        <a-col :md="8" :sm="8">
          <a-radio-group :options="plainOptions" :default-value="value1" @change="handleRadioChange"/>
        </a-col>
      </a-row>
      <a-row >
        <!-- 输入框 -->
        <a-col :md="2" :sm="2"></a-col>
        <a-col :md="18" :sm="18">
          <div v-if="showSelection" class="selectionWrapper">
            <ul>
              <li
                v-for="(item,index) in wordsArr"
                :key="index"
                @click="handleLiClick(item)"
                :class="{active:activeItem===item}">{{ item }}</li>
            </ul>
          </div>
          <a-textarea
            v-else
            v-model="formData.taskComment"
            :autoSize="{ minRows: 5, maxRows: 5 }"
            :maxLength="200"
          >
          </a-textarea>
          <div v-if="!showSelection" class="textAreaWordCount">{{ countWord }}/200</div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="2" :sm="2"></a-col>
        <a-col :md="18" :sm="18">
          <a-upload :remove="handleRemove" :fileList="fileList" :before-upload="beforeUpload" :customRequest="doUpload">
            <a-button :loading="uploading" >
              {{ $t('uploadFile') }}<a-icon type="upload" v-show="!uploading" />
            </a-button>
          </a-upload>
        </a-col>
      </a-row>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import fileUploadApi from '@/api/modules/system/fileUpload'
import SparkMD5 from 'spark-md5'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { reviewProcessColumns } from '../config/list'
import i18n from '@/lang'
export default {
  components: { TableEllipsis, QuestionMarkTip },
  props: {
    fileLimitObj: {
      type: Object,
      default () {
        return {
          fileCount: 1,
          fileSize: 1
        }
      }
    }
  },
  data () {
    return {
      formLayout: 'horizontal',
      uploading: false,
      showEdit: false,
      columns: reviewProcessColumns,
      plainOptions: [i18n.t('custom'), i18n.t('commonWords')],
      value1: i18n.t('custom'),
      showSelection: false,
      // eslint-disable-next-line max-len
      wordsArr: [i18n.t('zxbty'), i18n.t('tyqjkcl'), i18n.t('tyqjscl'), i18n.t('tyqzhptgz'), i18n.t('bypzqhshzsq'), i18n.t('xgclbwz'), i18n.t('sqrqxbfh'), i18n.t('xqbmq')],
      activeItem: '',
      fileList: [],
      commentInput: '',
      formData: {
        fileIds:	[],
        taskId: this.$route.query.p,
        taskComment: ''
      }
    }
  },
  computed: {
    countWord () {
      return 200 - this.formData.taskComment.length
    }
  },
  methods: {
    // 获取上传文件内容md5
    getChecksum (file) {
      return new Promise((resolve, reject) => {
        const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
        const spark = new SparkMD5.ArrayBuffer()
        const fileReader = new FileReader()
        fileReader.readAsArrayBuffer(blobSlice.call(file, 0, file.size))
        fileReader.onload = function (e) {
          spark.append(e.target.result)
          resolve(spark.end())
        }
        fileReader.onerror = function (err) {
          reject(err)
        }
      })
    },
    // 自定义上传
    doUpload (options) {
      this.uploading = true
      this.getChecksum(options.file).then(result => {
        const formData = new FormData()
        formData.append('file', options.file)
        fileUploadApi.uploadWholeFileToLocal(formData, { hashAlgorithm: 1, checksum: result, uploadType: 1 })
          .then(res => {
            this.formData.fileIds.push(res.data * 1)
            this.$message.success(this.$t('uploadedSuccessfully'))
            this.fileList.push(options.file)
          }).finally(() => {
            this.uploading = false
          })
      }).catch(err => {
        console.log(err)
      })
    },
    // 移除上传文件列表处理
    handleRemove (data) {
      this.fileList = this.fileList.filter((item, index) => {
        if (item.uid === data.uid) {
          this.formData.fileIds.splice(index, 1)
          return false
        }
        return true
      })
    },
    // 检测文件大小以内
    beforeUpload (file) {
      const maxSize = 1024 * 1024 * this.fileLimitObj.fileSize
      if (file.size > maxSize) {
        const msg = this.$t('uploadLimit').replace('__SIZE__', this.fileLimitObj.fileSize + 'M')
        this.$message.error(msg)
        return false
      }
      if ((this.fileList.length + 1) > this.fileLimitObj.fileCount) {
        const msg = this.$t('uploadCountLimit').replace('__SIZE__', this.fileLimitObj.fileCount)
        this.$message.error(msg)
        return false
      }
      this.fileName = file.name
      return true
    },
    // 点击切换常用于或者自定义审批意见
    handleRadioChange (e) {
      if (e.target.value === this.$t('commonWords')) {
        this.formData.taskComment = ''
        this.activeItem = ''
        this.showSelection = true
      } else {
        this.formData.taskComment = ''
        this.activeItem = ''
        this.showSelection = false
      }
    },
    // 点击选择常用语
    handleLiClick (e) {
      this.activeItem = e
      this.formData.taskComment = e
    },
    // 回显上传文件
    showFileObj (value) {
      const vm = this
      vm.dataSource[vm.dataAdress].file = value
      const formData = new FormData()
      formData.append('file', value)
      formData.append('strategyId', vm.dataSource[vm.dataAdress].strategyId)
      vm.dataSource[vm.dataAdress].pretreatmentId = null
      vm.$api.fliePretreatment(formData).then(res => {
        if (res.data && res.data.pretreatmentId) {
          vm.dataSource[vm.dataAdress].pretreatmentId = res.data.pretreatmentId
          vm.dataSource[vm.dataAdress].fileFailCar = res.data.failNumber + res.data.repeatNumber
          vm.dataSource[vm.dataAdress].fileSuccessCar = res.data.successNumber
          vm.dataSource[vm.dataAdress].fileTotal = res.data.failNumber + res.data.repeatNumber + res.data.successNumber
        }
      }).catch(() => {
        vm.dataSource[vm.dataAdress].file = {}
      })
    }
  }
}
</script>
<style lang="less" scoped>
li{
  height: 20px;
  font-size: 14px;
  line-height: 20px;
}
.selectionWrapper{
  height: 136px;
  margin-bottom: 4px;
  overflow-y: scroll;
  border: 1px solid black;
  ul{
    padding: 0;
  }
}
.active{
  background-color: #4388A6 ;
  color: aliceblue;
}
::v-deep .ant-form-item{
margin-bottom: 8px ;
}
::v-deep .deepClass{
    font-weight: 600;
    margin-right: 38px;
    text-align: right;

}
::v-deep .ant-form-item-label {
    font-weight: 600;
    margin-right: 12px;
}
  .customFormModelItem2 {
      ::v-deep .ant-form-item-label {
        &::before {
          display: inline-block;
          content: '';
          width: 6px;
          background-color: rgba(67, 136, 166, 1);
          height: 14px;
          vertical-align: middle;
          margin-right: 3px;
        }
      }
    }
::v-deep .ant-upload-list-item-info .anticon-loading, .ant-upload-list-item-info .anticon-paper-clip {
    position: absolute;
    top: 0.3rem !important;
    color: #666;
    font-size: 1.4rem;
}
::v-deep .ant-upload-list-item-name {
    padding-left: 1.4rem !important;
}
.textAreaWordCount {
  position: relative;
  font-size: 10px;
  text-align: right;
  margin-top: -35px;
  margin-right: 15px;
}
</style>
